<template>
  <div class="page-container">
    <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
    <div class="scale-container">
      <!-- 顶部标题 -->
      <div class="headTitle">{{ headTitle }}</div>
      <div class="headButton" @click="backHome"></div>
      <div class="left1" @click="goToService('tianjin')"></div>
      <div class="right1" @click="goToService('tianjinnewEnergy')"></div>
      <!-- 左边内容 -->
      <div class="left">
        <div class="box">
          <div class="headImg"></div>
          <div class="title">中汽研汽车检验中心(常州)有限公司</div>
          <div class="content">
            <img class="img1" src="/imgs/changzhou/常检鸟瞰图.jpg" />
            <p class="contentTitle">
              中汽研汽车检验中心(常州)有限公司成立于2020年12月21日，是中国汽车技术研究中心有限公司(中汽研)在长三角地区的重点布局项目，位于江苏省常州市武进国家高新技术产业开发区海湖路97号。
            </p>
            <p class="contentTitle">
              公司能承担汽车整车及关键零部件的法规检验检测和研发验证试验及出口认证检测业务，具备汽车整车及相关零部件测试、汽车节能环保测试、主被动安全测试等检测能力，先进的设备和高素质的人才队伍以及区域化的优势是我们为企业提供贴心服务的有力保障。
            </p>
          </div>
        </div>
        <div class="box2">
          <div class="headImg"></div>
          <div class="title">中汽研扬州汽车工程研究院有限公司</div>
          <div class="content">
            <img class="img1" src="/imgs/changzhou/扬州公司鸟瞰图.jpg" />
            <p class="contentTitle">
              中汽研扬州汽车工程研究院有限公司(简称扬州公司)，成立于2019年8月，扬州公司是中汽研汽车检验中心(常州)有限公司的全资子公司。扬州公司以整车技术研发为发展定位，已建成集工程研发、测试评价、产业转化于一体的研发创新平台。
            </p>
            <p class="contentTitle">两大方向: 汽车新能源、整车智能网联</p>
            <p class="contentTitle">五大平台: 燃料电池系统整车性能开发平台、汽车智能网联技术研发验证平台、整车NVH(振动噪声)性能开发平台、新能源整车热管理性能开发平台、汽车性能开发综合试验路等
            </p>

          </div>
        </div>
        <div class="box3">
          <div class="content">
            <div class="headImg"></div>
            <div class="title">组织架构</div>
          </div>
          <div class="content2">
            <div class="leftbox">
              <div class="box1-1">总人数：<span>309</span>人</div>
            </div>
            <div class="rightbox"></div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="content">
          <div class="years">2016.11.17</div>
          <div class="values">注册常州院公司</div>
        </div>
        <div class="content2">
          <div class="years">2017.6.21</div>
          <div class="values">一期项目开工</div>
        </div>
        <div class="content3">
          <div class="years">2019.5.22</div>
          <div class="values">正式运行</div>
        </div>
        <div class="content4">
          <div class="years">2020.12.21</div>
          <div class="values">注册检验中心公司</div>
        </div>
        <div class="content5">
          <div class="years">2022.5.25</div>
          <div class="values">二期项目开工</div>
        </div>
        <div class="content6">
          <div class="years">2022.12.28</div>
          <div class="values">建筑主体结构封顶</div>
        </div>
        <div class="content7">
          <div class="years">2024年6月</div>
          <div class="values">项目竣工试运营</div>
        </div>
        <div class="content15">中汽研汽车检验中心(常州)有限公司</div>
        <div class="content16"></div>
        <div class="content17">中汽研扬州汽车工程研究院有限公司</div>
        <div class="content18">
          <div class="tubiao1"></div>
          <span class="tubiaoTitle">注册资金<span class="tubiaoValue">6</span>亿元</span>
          <div class="tubiao2"></div>
          <span class="tubiaoTitle">占地面积<span class="tubiaoValue">173</span>亩</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">建筑面积<span class="tubiaoValue">91752</span>㎡</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">实验室面积<span class="tubiaoValue">61260</span>㎡</span>
        </div>
        <div class="content19">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
          <span class="title">常州</span>
          <div class="pointImg"></div>
          <div class="img4"></div>
          <div class="img5"></div>
          <div ref="lottieRef" class="lottie-box"></div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <div class="box">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">主营业务</div>
          </div>
        </div>
        <div class="box2">
          <div class="content" v-for="(item, index) in businessData" :key="index">
            <div class="text">{{ item.domainName }}</div>
            <div class="left-images">
              <div class="image-wrapper" v-for="(imgItem, imgIdx) in item.images" :key="imgIdx">
                <div class="imgconent">
                  <img :src="imgItem.imgUrl" alt="测试场景" class="img1">
                  <div class="title">{{ imgItem.imgTitle }}</div>
                </div>
              </div>
            </div>
            <div class="textcontent">
              <div class="content1-1" v-for="(lab, labIndex) in item.items" :key="labIndex">
                {{ lab }}
              </div>
            </div>
          </div>

          <div class="content2" v-for="(item, index) in businessData2" :key="index">
            <div class="module-top-img">
              <div class="img-title">{{ item.topImgTitle }}</div>
              <img :src="item.topImgUrl" class="module-img" alt="业务图">
            </div>
            <div class="module-lists">
              <div class="list-left">
                <div class="list-item" v-for="(leftText, i) in item.leftList" :key="i">
                  {{ leftText }}
                </div>
              </div>
              <div class="list-right">
                <div class="list-item" v-for="(rightText, i) in item.rightList" :key="i">
                  {{ rightText }}
                </div>
              </div>
            </div>
            <div class="module-bottom-title">
              {{ item.domainName }}
            </div>
          </div>

        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">资质能力证书</div>
          </div>
          <!-- 第一列滚动容器 -->
          <div class="content">
            <div class="scroll-container" data-type="qualification" data-col="1">
              <div class="scroll-item">
                <img class="img1" src="/imgs/changzhou/高新技术企业.png" />
                <p class="contentTitle">高新技术企业</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第二列滚动容器 -->
          <div class="content" style="margin-left: 1100px;">
            <div class="scroll-container" data-type="qualification" data-col="2">
              <div class="scroll-item">
                <img class="img1" src="/imgs/changzhou/省专精特精.png" />
                <p class="contentTitle">省专精特精</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第三列滚动容器 -->
          <div class="content" style="margin-left: 2100px;">
            <div class="scroll-container" data-type="qualification" data-col="3">
              <div class="scroll-item">
                <img class="img1" src="/imgs/changzhou/资质认定&能力认可.png" />
                <p class="contentTitle">资质认定&能力认可</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
        </div>
        <div class="box4">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">人员情况</div>
          </div>
          <div class="content">
            <div class="content1">
              <div class="content1-1">
                <div class="content-title">合同性质</div>
              </div>
              <div class="img"></div>
              <div class="textcontent">
                <div class="text">1.6%</div>
                <div class="text">21.6%</div>
                <div class="text">38.1%</div>
                <div class="text">38.7%</div>
              </div>
              <div class="textcontent2">
                <div class="text">正式：120人 38.7%</div>
                <div class="text text2">项外：67人 21.6%</div>
                <div class="text text3">岗外：118人 38.1%</div>
                <div class="text text4">派遣：5人 1.6%</div>
              </div>
            </div>
            <div class="content2">
              <div class="content1">
                <div class="content1-1">正式员工人数</div>
                <div class="content1-2">
                  <chartCube :xAxis="xAxisData" :series="seriesData" />
                </div>
              </div>
            </div>
            <div class="content3">
              <div class="content3-1">
                <div class="content-title" v-for="(title, index) in titles" :key="index">
                  {{ title }}
                </div>
              </div>
              <div class="content3-2">
                <chartHengCube class="chartsGl" :data="chartDataList2" height="400px"
                  :cylinderConfig="{ barHeight: 36, gap: 24, depth: 10 }">
                </chartHengCube>
              </div>
            </div>
            <div class="content2">
              <div class="content1">
                <div class="content1-1">正式员工年龄</div>
                <div class="content1-2">
                  <chartCube :xAxis="xAxisData2" :series="seriesData2" />
                </div>
              </div>
            </div>
            <div class="content4">
              <div class="content4-1">
                <div class="content-title" v-for="(title, index) in titles2" :key="index">
                  {{ title }}
                </div>
              </div>
              <div class="content4-2">
                <piechartKj3D class="chartsGl" :datalist="chartDataList"></piechartKj3D>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import lottie from 'lottie-web';
import chartCube from '../../components/chart/bar-3d.vue'; // 引入柱状图组件
import chartHengCube from '../../components/chart/HengBar-3d.vue'; // 引入柱状图组件
import piechartKj3D from "../../components/chart/chartPie.vue";
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
//跳转路由
const backHome = () => {
  router.push({ name: 'home' })
}
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
//x轴标签
const xAxisData = ref([
  "经理层",
  "管理部",
  "财务部",
  "业务部",
  "整车部",
  "能东部",
  "新能源部",
  "智能部",
  "扬州公司",
]);
//数据
const seriesData = ref({
  name: "数量",
  data: [4, 9, 3, 11, 20, 20, 20, 20, 14,],
});
//x轴标签
const xAxisData2 = ref([
  "30岁及以下",
  "31至35岁",
  "36至40岁",
  "41至45岁",
  "46至50岁",
  "50岁以上",
]);
//数据
const seriesData2 = ref({
  name: "数量",
  data: [63, 31, 14, 10, 0, 2],
});
// 1. 标题列表
const titles = ref([
  '正式员工性别',
]);
// 1. 标题列表
const titles2 = ref([
  '正式员工学历',
]);
// 2. 每个标题对应的图表数据（根据图表组件要求的格式定义）
const chartDataList = ref(
  // 职务分布对应的数据
  [
    { name: "博士", value: 2, itemStyle: { color: "#4A90E2" } },
    { name: "硕士", value: 62, itemStyle: { color: "#FF7D00" } },
    { name: "本科", value: 56, itemStyle: { color: "#8C8C8C" } },
  ]
);
// 2. 每个标题对应的图表数据（根据图表组件要求的格式定义）
const chartDataList2 = ref(
  // 学历分布对应的数据
  [
    { label: '男', value: 92, color: '#3681D7' },
    { label: '女', value: 28, color: '#CEA424' },
  ]
);
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 响应式状态：控制弹窗显示
const showVideo = ref(false);
// 视频DOM引用（用于控制播放/暂停）
const videoRef = ref(null);
// 视频地址（待提供，先定义变量占位）
const videoUrl = ref('');
// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/changzhou.json',
      loop: true,
      autoplay: true,
    });
  }
};
const businessData = ref([
  {
    type: "normal",
    domainName: "整车领域",
    images: [
      {
        imgUrl: '/imgs/changzhou/汽车前照灯性能测评场地.jpg',
        imgTitle: "汽车前照灯性能测评场地"
      },
      {
        imgUrl: '/imgs/changzhou/整车道路测试.jpg',
        imgTitle: "整车道路试验"
      }
    ],
    items: [
      "整车性能测试",
      "行人保护模拟碰撞",
      "汽车前照灯性能测评",
      "整车道路试验能力",
      "整车道路模拟",
      "路谱采集"
    ]
  },
  {
    type: "normal",
    domainName: "能源动力与环境领域",
    images: [
      {
        imgUrl: '/imgs/changzhou/整车环境仓.jpg',
        imgTitle: "整车环境舱"
      },
      {
        imgUrl: '/imgs/changzhou/1200kW发动机台架.jpg',
        imgTitle: "1200kW发动机台架"
      }
    ],
    items: [
      "整车排放研发及认证",
      "发动机研发及认证",
      "新型动力总成研发验证",
      "替代燃料测试及评价",
      "节能技术测试及评价",
      "涉氢动力总成测试平台"
    ]
  },
  {
    type: "normal",
    domainName: "新能源领域",
    images: [
      {
        imgUrl: '/imgs/changzhou/E-MAST多轴震动试验台.jpg',
        imgTitle: "E-MAST多轴振动试验台"
      },
      {
        imgUrl: '/imgs/changzhou/充放电性能试验室.jpg',
        imgTitle: "充放电性能试验室"
      }
    ],
    items: [
      "动力电池测试",
      "储能电池测试",
      "充电部件测试",
      "电池运输出口测试",
      "高低压附件测试",
      "燃料电池系统测试平台"
    ]
  },
]);
// 替换你的businessData2，直接对应第二张图的数据
const businessData2 = ref([
  {
    topImgUrl: "/imgs/changzhou/车载天线OTA试验室.jpg", // 顶部图地址
    topImgTitle: "车载天线OTA试验室", // 图上标题
    leftList: [ // 图下方的3行文字
      "汽车功能安全测试",
      "整车EMC、OTA测试平台",
      "汽车性能开发综合试验路"
    ],
    rightList: [ // 右侧的多行文字
      "智能驾驶封闭场地/公开道路/仿真测试",
      "汽车整车电磁兼容测试",
      "汽车零部件电磁兼容测试",
      "汽车网络（以太网）测试",
      "汽车信息安全测试"
    ],
    domainName: "智能网联与电磁兼容领域" // 底部大标题
  }
]);
// 修改initScrollAnimations函数，实现不同数量条目下的同步滚动
const initScrollAnimations = () => {
  const containers = Array.from(document.querySelectorAll('.scroll-container'));
  if (containers.length === 0) return;
  // 全局配置（所有容器共享的滚动节奏）
  const pauseTime = 2500; // 统一停顿时间（2.5秒）
  const scrollDuration = 500; // 统一滚动动画时间（0.5秒）
  let isAnimating = false; // 全局动画锁，防止并发滚动
  let globalTimer = null; // 全局计时器控制同步节奏
  // 为每个容器初始化独立状态（记录自己的进度）
  const containerStates = containers.map(container => {
    const items = Array.from(container.querySelectorAll('.scroll-item:not(.copy-first)'));
    const itemCount = items.length;
    // 复制第一个条目用于自己的无缝循环
    const copyFirst = container.querySelector('.copy-first');
    copyFirst.innerHTML = items[0] ? items[0].innerHTML : '';
    copyFirst.style.display = itemCount > 0 ? 'flex' : 'none';
    return {
      container, // 容器DOM
      items, // 自己的条目列表
      itemCount, // 自己的条目总数（如3或8）
      currentIndex: 0, // 自己当前的索引
      width: container.offsetWidth // 自己的宽度（支持不同列宽度）
    };
  });
  // 同步触发所有容器滚动（各自走自己的下一个索引）
  const scrollAll = () => {
    if (isAnimating) return;
    isAnimating = true;
    // 每个容器计算自己的下一个索引和目标位置
    containerStates.forEach(state => {
      if (state.itemCount === 0) return; // 无内容则不滚动
      // 计算自己的下一个索引（独立循环）
      let nextIndex = state.currentIndex + 1;
      // 目标位置：如果是最后一个条目，下一个滚动到复制的条目（用于无缝循环）
      const targetPosition = nextIndex <= state.itemCount
        ? -nextIndex * state.width
        : -state.itemCount * state.width; // 最后一个条目后，先滚动到复制的条目
      // 应用滚动（所有容器同时开始动画）
      state.container.style.transition = `transform ${scrollDuration}ms ease`;
      state.container.style.transform = `translateX(${targetPosition}px)`;
      // 更新自己的索引（临时存为nextIndex，动画结束后确认）
      state.tempNextIndex = nextIndex;
    });
    // 动画结束后处理每个容器的状态（独立复位）
    setTimeout(() => {
      containerStates.forEach(state => {
        if (state.itemCount === 0) return;
        // 如果滚动到了复制的条目（超出自己的条目总数），则无缝复位
        if (state.tempNextIndex > state.itemCount) {
          state.container.style.transition = 'none'; // 取消动画，瞬间复位
          state.container.style.transform = 'translateX(0)';
          state.currentIndex = 0; // 重置为第一个条目
          // 重新启用过渡效果（下次滚动生效）
          setTimeout(() => {
            state.container.style.transition = `transform ${scrollDuration}ms ease`;
          }, 50);
        } else {
          // 正常更新索引
          state.currentIndex = state.tempNextIndex;
        }
      });
      isAnimating = false;
      startGlobalTimer(); // 所有容器处理完后，启动下一次全局计时
    }, scrollDuration);
  };
  // 全局计时器：控制所有容器同步停顿后滚动
  const startGlobalTimer = () => {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(scrollAll, pauseTime);
  };
  // 全局暂停/继续：鼠标悬停任何容器，所有容器一起暂停
  containers.forEach(container => {
    container.addEventListener('mouseenter', () => {
      clearTimeout(globalTimer);
    });
    container.addEventListener('mouseleave', () => {
      if (!isAnimating) {
        startGlobalTimer();
      }
    });
  });
  // 初始启动
  startGlobalTimer();
};
//跳转路由
const goToService = (item) => {
  router.push({ name: item })
}
onMounted(() => {
  initLottieAnimation();
  // 等待DOM完全渲染后初始化滚动动画
  nextTick(() => {
    initScrollAnimations();
  });
})
// 组件销毁时清除定时器（防止内存泄漏）
onUnmounted(() => {
});
</script>
<style scoped>
.left1{
  z-index: 999;
  cursor: pointer;
  top: 45%;
  left: 10px;
  position: absolute;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/left1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.right1{
  z-index: 999;
  cursor: pointer;
  position: absolute;
  top: 45%;
  right: 10px;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/right1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* 滚动容器设置为水平布局 */
.scroll-container {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  /* 平滑过渡效果 */
}

/* 每个滚动项占满容器宽度，确保内容居中显示 */
.scroll-item {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
}

/* 确保图片和文字不超出边界 */
.scroll-item .img1,
.scroll-item .img2 {
  max-width: 40%;
  height: auto;
  object-fit: contain;
}

.scroll-item .contentTitle {
  max-width: 50%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 最多显示4行 */
  -webkit-box-orient: vertical;
}

/* 隐藏复制的条目（用于无缝循环） */
.copy-first {
  display: none;
}

/* 触发区域样式（保持原有） */
.box {
  cursor: pointer;
  /* 提示可点击 */
  /* 原有样式... */
}

@keyframes sweep {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 200%;
  }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* 向下移动20px */
  }
}

/* 视频弹窗：全屏覆盖 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 9600px;
  height: 2240px;
  background-color: rgba(0, 0, 0, 0.95);
  /* 深色背景突出视频 */
  z-index: 9999;
  /* 最高层级，覆盖所有内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 视频播放器：自适应全屏 */
.video-player {
  width: 9600px;
  height: 2240px;
  /* 避免超出屏幕 */
  object-fit: contain;
  /* 保持视频比例，不拉伸 */
}

/* 关闭按钮 */
.video-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
}

.video-close:hover {
  background-color: #ff4d4f;
  /* hover时变红，增强交互 */
}

/* 禁止页面滚动（弹窗显示时） */
:deep(body) {
  overflow: v-bind('showVideo ? "hidden" : "auto"');
}


/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
  width: 6240px;
  height: 1456px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
  width: 9600px;
  height: 2240px;
  transform: scale(0.65);
  transform-origin: 0 0;
  position: relative;
}

.lottie-box {
  z-index: 99;
  position: absolute;
  left: 969px;
  top: 386px;
  width: 885px;
  height: 889px;
  font-size: 80px;
}

.headTitle {
  text-align: center;
  position: relative;
  top: -24px;
  font-size: 130px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headButton {
  cursor: pointer;
  display: flex;
  float: inline-end;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 78px;
  height: 78px;
  background-image: url("/imgs/ningbo/cancel.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


.left {
  display: flex;

  .box {
    margin-left: 140px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1407px;
        height: 600px;
        border-radius: 10px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        position: relative;
        top: -64px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 132px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1407px;
        height: 600px;
        border-radius: 10px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        position: relative;
        top: -6px;
        text-indent: 3.5ch;
        width: 1356px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box3 {
    display: flex;
    position: absolute;
    margin-top: 1256px;
    margin-left: 132px;
    display: flex;

    .content {
      display: flex;
      height: 158px;
      width: 2247px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content2 {
      position: absolute;
      left: 40px;
      flex-wrap: nowrap;
      top: 152px;
      flex-direction: row;
      display: flex;
      justify-content: center;
      align-items: center;

      .leftbox {
        width: 860px;
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 268px;
        left: 59px;

        .box1-1 {
          display: flex;
          flex-direction: row;
          width: 500px;
          font-family: FZLanTingHeiS-B-GB;
          font-weight: 400;
          font-size: 39px;
          color: #FFFFFF;

          span {
            position: relative;
            top: -104px;
            margin: 20px;
            width: 257px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 121px;
            color: #FFFFFF;
            background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .rightbox {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2906px;
        height: 380px;
        background-image: url("/imgs/changzhou/组 7769 拷贝 6.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
}

.middle {
  position: absolute;
  left: 3364px;
  top: 257px;
  width: 2874px;
  height: 521px;
  background-image: url("/imgs/ningbo/矩形 606.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .img1 {
    position: relative;
    left: 105px;
    top: 135px;
    width: 485px;
    height: 160px;
    background-image: url("/imgs/changzhou/组 7810.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .img2 {
    position: relative;
    left: 800px;
    top: 20px;
    width: 1858px;
    height: 75px;
    background-image: url("/imgs/guangzhou/heng.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .content {
    top: -136px;
    left: 750px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content2 {
    top: -40px;
    left: 1083px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content3 {
    top: -284px;
    left: 1300px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content4 {
    top: -187px;
    left: 1492px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content5 {
    top: -417px;
    left: 1865px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content6 {
    top: -335px;
    left: 2185px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content7 {
    top: -568px;
    left: 2572px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }


  .content15 {
    position: absolute;
    top: 420px;
    left: 238px;
    font-family: FZLanTingHeiS-B-GB;
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(255, 132, 0, 0.66) 10%, rgba(255, 224, 170, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .content16 {
    position: absolute;
    top: 430px;
    left: 1421px;
    width: 3px;
    height: 63px;
    background: #9EF0FF;
    opacity: 0.6;
    display: block;
    border: none;
  }

  .content17 {
    position: absolute;
    top: 420px;
    left: 1710px;
    font-family: "FZLanTingHeiS-B-GB";
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .content18 {
    top: 550px;
    z-index: 999;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    justify-self: anchor-center;
    /* left: 97px; */
    z-index: 999;

    .tubiao1 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/guangzhou/组 7752.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao2 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/guangzhou/组 7752 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao3 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/guangzhou/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao4 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/guangzhou/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiaoTitle {
      margin-left: 20px;
      margin-right: 20px;
      position: relative;
      top: -29px;
      width: auto;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 42px;
      color: #FFFFFF;
      background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
      -webkit-background-clip: text;

      .tubiaoValue {
        position: relative;
        top: 9px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 86px;
        color: #FFFFFF;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg,
            transparent 35%,
            rgba(#fff, 0.6),
            transparent 65%) no-repeat,
          currentColor;
        background-size: 50%;
        -webkit-background-clip: text;
        animation: sweep 2s infinite;
        background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .content19 {
    display: flex;
    position: absolute;
    top: 420px;
    left: 0;
    width: 2808px;
    height: 1641px;
    background-image: url("/imgs/ningbo/中间地球 2副本.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
      position: absolute;
      left: 532px;
      top: 287px;
      width: 1467px;
      height: 1199px;
      background-image: url("/imgs/ningbo/组 7764.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img2 {
      transform: scaleX(1.5);
      position: relative;
      left: 1665px;
      top: 846px;
      width: 143px;
      height: 157px;
      background-image: url("/imgs/shanghai/形状 797 拷贝 2.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img3 {
      z-index: 99999;
      position: relative;
      left: 1605px;
      top: 900px;
      width: 34px;
      height: 45px;
      background-image: url("/imgs/ningbo/点位 (3).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img4 {
      position: absolute;
      left: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img5 {
      position: absolute;
      right: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      transform: scaleX(-1);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .title {
      left: 1790px;
      top: 876px;
      position: absolute;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 38px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pointImg {
      position: absolute;
      top: 357px;
      left: 919px;
      width: 918px;
      height: 933px;
      background-image: url("/imgs/home/地图层 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.right {
  display: flex;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  left: 6363px;
  top: 200px;

  .box {
    display: flex;
    flex-direction: row;
    margin-left: 73px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    position: absolute;
    margin-left: 172px;
    display: flex;
    flex-direction: row;
    margin-top: 180px;
    gap: 20px;

    .content {
      flex-direction: row;
      display: flex;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      top: 178px;
      width: 695px;
      height: 466px;
      gap: 12px;
      background-image: url("/imgs/changzhou/矩形 933 拷贝 6.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .text {
        position: absolute;
        bottom: 10px;
        text-align: center;
        width: 400px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 33px;
        color: #FFFFFF;
        line-height: 46px;
      }

      /* 左侧图片组：垂直排列两张图片 */
      .left-images {
        margin-left: 50px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* 两张图片的间距 */
        margin-bottom: 15px;

        .image-wrapper {
          width: 100%;
          position: relative;
          overflow: hidden;

          .imgconent {
            position: relative;
            border-radius: 4px;
            overflow: hidden;

            /* 防止图片/文字溢出 */
            .title {
              position: absolute;
              /* 绝对定位在图片顶部 */
              top: 0;
              left: 0;
              right: 0;
              padding: 8px 12px;
              width: 274px;
              height: 24px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 31px;
              /* 确保文字不被截断 */
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .img1 {
              object-fit: cover;
              /* 保持比例填充 */
              display: block;
              /* 去除底部间隙 */
              width: 260px;
              height: 150px;
              background-image: url("/imgs/changzhou/整车道路测试.jpg");
              background-position: left;
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }

            .img2 {
              width: 260px;
              height: 150px;
              background-image: url("/imgs/changzhou/汽车前照灯性能测评场地.jpg");
              background-position: left;
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }
          }
        }
      }

      /* 新增：小白点样式 */
      .content1-1::before {
        content: '';
        display: inline-block;
        margin-right: 15px;
        /* 白点与文字的间距 */
        vertical-align: middle;
        width: 20px;
        height: 20px;
        background-image: url("/imgs/guangzhou/椭圆 767.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .textcontent {
        transform: translateX(10%);
        display: flex;
        flex-direction: column;

        .content1-1 {
          /* 核心修改：将水平居中改为左对齐 */
          justify-content: flex-start;
          /* 增加左侧内边距，让内容从左侧有一定缩进（根据视觉效果调整） */
          padding-left: 40px;
          /* 其他原有样式保留 */
          display: flex;
          align-items: center;
          /* 保持垂直居中（白点和文字对齐） */
          width: 425px;
          height: 46px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 25px;
          color: #FFFFFF;
          line-height: 50px;
        }
      }
    }

    .content2 {
      /* 容器：纵向堆叠（图→列表→标题） */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 695px;
      height: 466px;
      padding: 12px;
      background-image: url("/imgs/changzhou/矩形 933 拷贝 7.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;

      /* 1. 顶部图+图标题 */
      .module-top-img {
        position: relative;
        width: 92%;
        margin-bottom: 8px;
        position: relative;
        top: 30px;

        .img-title {
          position: absolute;
          top: 8px;
          left: 15px;
          font-size: 24px;
          color: #fff;
          font-weight: bold;
        }

        .module-img {
          /* width: 100%; */
          width: 260px;
          height: 150px;
          object-fit: cover;
          border-radius: 4px;
        }
      }

      /* 2. 中间：图下3行 + 右侧多行 */
      .module-lists {
        display: flex;
        width: 92%;
        gap: 20px;

        /* 图下方的3行文字（左列表） */
        .list-left {
          width: 60%;
          display: flex;
          flex-direction: column;
          gap: 12px;
          position: relative;
          top: 50px;

          /* 列表项（带小白点） */
          .list-item {
            display: flex;
            align-items: center;
            font-size: 22px;
            color: #fff;
            padding-left: 25px;
            position: relative;
          }
        }

        /* 右侧的多行文字（右列表） */
        .list-right {
          width: 50%;
          display: flex;
          flex-direction: column;
          gap: 12px;
          position: relative;
          top: -100px;
          left: 2px;

          /* 列表项（带小白点） */
          .list-item {
            display: flex;
            align-items: center;
            font-size: 22px;
            color: #fff;
            padding-left: 25px;
            position: relative;
          }
        }
      }

      /* 3. 底部大标题 */
      .module-bottom-title {
        position: absolute;
        bottom: 10px;
        font-size: 33px;
        color: #fff;
        font-weight: bold;
      }
    }

    .list-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      background-image: url("/imgs/guangzhou/椭圆 767.png");
      background-size: 100% 100%;
    }


  }

  .box3 {
    margin-left: 76px;
    display: flex;
    position: relative;
    top: 530px;
    flex-wrap: wrap;
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      /* 关键：背景固定，不随内容滚动 */
      margin-top: 166px;
      margin-left: 120px;
      position: absolute;
      width: 908px;
      height: 396px;
      background-image: url("/imgs/ningbo/图层 1014 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;

      .img1 {
        width: 234px;
        height: 305px;
      }

      .img2 {
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        width: 300px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 63px;
        text-align: left;
      }

      /* 滚动容器：用于承载滚动内容 */
      .scroll-container {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      /* 单个滚动项：确保内容正确显示 */
      .scroll-item {
        align-items: center;
        justify-content: space-between;
        width: 98%;
        /* height: 350px; */
        display: flex;
        align-items: center;
      }

      /* 图片和文字样式保持不变，确保在滚动项中居中 */
      .img1 {
        margin: 0 auto !important;
        width: 400px;
        height: 277px;
      }

      .img2 {
        margin: 0 auto !important;
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: left;
        width: 300px;
        font-size: 30px;
        text-align: center;
      }

      /* 复制的第一个条目初始隐藏 */
      .copy-first {
        display: none;
      }
    }

  }

  .box4 {
    margin-left: 76px;
    display: flex;
    position: relative;
    top: 920px;
    flex-wrap: wrap;
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      position: absolute;
      left: 150px;
      flex-wrap: nowrap;
      top: 152px;
      flex-direction: row;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;

      .content1 {
        display: flex;
        flex-direction: column;
        width: 500px;

        .content1-1 {
          display: flex;
          flex-direction: row;

          .content-title {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
            text-align: center;
            line-height: 70px;
            width: 310px;
            height: 134px;
            background-image: url("/imgs/wuhan/图层 1055 拷贝 2.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }

        .img {
          width: 304px;
          height: 251px;
          background-image: url("/imgs/changzhou/组 7806 拷贝.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .textcontent {
          position: relative;
          top: -236px;
          left: 47px;
          display: flex;
          flex-direction: row;
          gap: 30px;

          .text {
            width: 37px;
            height: 14px;
            font-family: "微软雅黑粗体";
            font-size: 16px;
            color: #FFFFFF;
          }
        }
        /* 圆点伪元素 */
        .textcontent2 .text::before {
          content: "";
          /* 空内容，通过样式生成圆点 */
          position: absolute;
          left: 0;
          top: 0px;
          width: 19px;
          height: 19px;
          background: #CEA424;
        }
        /* 圆点伪元素 */
        .textcontent2 .text2::before {
          content: "";
          /* 空内容，通过样式生成圆点 */
          position: absolute;
          left: 0;
          top: 0px;
          width: 19px;
          height: 19px;
          background: #3681D7;
        }

        /* 圆点伪元素 */
        .textcontent2 .text3::before {
          content: "";
          /* 空内容，通过样式生成圆点 */
          position: absolute;
          left: 0;
          top: 0px;
          width: 19px;
          height: 19px;
          background: #205CC3;
        }

        /* 圆点伪元素 */
        .textcontent2 .text4::before {
          content: "";
          /* 空内容，通过样式生成圆点 */
          position: absolute;
          left: 0;
          top: 0px;
          width: 19px;
          height: 19px;
          background: #C5C5C5;
        }

        .textcontent2 {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 30px;
          width: 600px;

          .text {
            position: relative;
            /* 为伪元素定位做准备 */
            padding-left: 30px;
            width: 223px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 19px;
            color: #FFFFFF;
            line-height: 22px;
          }
        }
      }

      .content3 {
        display: flex;
        flex-direction: column;
        width: 500px;

        .content3-1 {
          display: flex;
          flex-direction: row;

          .content-title {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
            text-align: center;
            line-height: 70px;
            width: 310px;
            height: 134px;
            background-image: url("/imgs/wuhan/图层 1055 拷贝 2.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }

        .content3-2 {
          .chartsGl {
            width: 400px;
            height: 400px;
          }
        }
      }

      .content4 {
        display: flex;
        flex-direction: column;

        .content4-1 {
          display: flex;
          flex-direction: row;

          .content-title {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
            text-align: center;
            line-height: 70px;
            width: 310px;
            height: 134px;
            background-image: url("/imgs/wuhan/图层 1055 拷贝 2.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }

        .content4-2 {
          .chartsGl {
            width: 90%;
            height: 400px;
          }
        }
      }

      .content2 {
        display: flex;
        flex-direction: column;
        width: 700px;

        .content1-1 {
          transform: translateX(80%);
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: FZLanTingHeiS-B-GB;
          font-weight: 400;
          font-size: 33px;
          color: #FFFFFF;
          text-align: center;
          line-height: 70px;
          width: 310px;
          height: 134px;
          background-image: url("/imgs/wuhan/图层 1055 拷贝 2.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .content1-2 {
          width: 600px;
          height: 400px;
        }
      }

      .leftbox {
        align-self: end;
        /* width: 860px; */
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;

        .content1-1 {
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: FZLanTingHeiS-B-GB;
          font-weight: 400;
          font-size: 33px;
          color: #FFFFFF;
          text-align: center;
          line-height: 70px;
          width: 310px;
          height: 134px;
          background-image: url("/imgs/wuhan/图层 1055 拷贝 2.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .box2-1 {
          display: flex;
          flex-direction: row;

          .img1 {
            width: 161px;
            height: 161px;
          }

          .box2-2 {
            display: flex;
            flex-direction: column;
            align-items: center;

            .text {
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 39px;
              color: #FFFFFF;

            }

            .box2-3 {
              display: flex;
              width: 220px;
              flex-wrap: nowrap;
              flex-direction: row;
              align-items: center;

              .text2 {

                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 88px;
                color: #FFFFFF;
                background: linear-gradient(0deg, rgba(0, 216, 255, 0.6) 10%, rgba(255, 255, 255, 1) 70%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              .text3 {
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 42px;
                color: #969696 !important;
              }
            }
          }
        }
      }

      .rightbox {
        display: flex;
        gap: 20px;
        /* 文本区与图片区间隔 */
        width: 1921px;
        height: 525px;
        background-image: url("/imgs/shanghai/组 7780.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

      }

      .box1-2 {
        /* 保持现有尺寸，确保背景图自适应 */
        width: 478px;
        height: 320px;
        background-position: center;
        background-size: cover;
        /* 图片自适应容器 */
        background-repeat: no-repeat;
      }
    }
  }
}
</style>